<template>
	<view class="container">
		<!-- 表单：绑定submit（提交）和reset（重置）事件 -->
		<form @submit="formSubmit" @reset="formReset">
			<!-- 1. Switch 开关 -->
			<view class="item uni-column">
				<view class="title">switch（开关）</view>
				<view>
					<switch name="switch" />
				</view>
			</view>

			<!-- 2. Radio 单选框 -->
			<view class="item uni-column">
				<view class="title">radio（单选框）</view>
				<radio-group name="radio">
					<label class="radio-label">
						<radio value="radio1" />
						<text>选项一</text>
					</label>
					<label class="radio-label">
						<radio value="radio2" />
						<text>选项二</text>
					</label>
				</radio-group>
			</view>

			<!-- 3. Checkbox 复选框 -->
			<view class="item uni-column">
				<view class="title">checkbox（复选框）</view>
				<checkbox-group name="checkbox">
					<label class="checkbox-label">
						<checkbox value="checkbox1" />
						<text>选项一</text>
					</label>
					<label class="checkbox-label">
						<checkbox value="checkbox2" />
						<text>选项二</text>
					</label>
				</checkbox-group>
			</view>

			<!-- 4. Slider 滑块 -->
			<view class="item uni-column">
				<view class="title">slider（滑块）</view>
				<slider value="50" name="slider" show-value />
			</view>

			<!-- 5. Input 输入框 -->
			<view class="item uni-column">
				<view class="title">input（输入框）</view>
				<input class="uni-input" name="input" placeholder="这是一个输入框" />
			</view>

			<!-- 表单按钮：submit（提交）和reset（重置） -->
			<view class="btn-group">
				<button form-type="submit">Submit（提交）</button>
				<button type="default" form-type="reset">Reset（重置）</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {}; // 修复：补充分号，删除无关字符
		}, // 修复：data和methods之间添加逗号
		methods: {
			// 表单提交事件
			formSubmit(e) {
				// 修复：清理混乱的console代码，逻辑正常
				console.log('form发生了submit事件，携带数据为:', e.detail.value);
				const formData = e.detail.value;
				// 弹窗显示表单数据
				uni.showModal({
					content: '表单数据内容:\n' + JSON.stringify(formData, null, 2), // 格式化JSON，更易读
					showCancel: false,
					title: '表单提交成功'
				});
			},
			// 表单重置事件
			formReset(e) {
				console.log('表单已清空数据', e);
				// 可选：重置时提示
				uni.showToast({
					title: '表单已重置',
					icon: 'none'
				});
			}
		}
	};
</script>

<style scoped>
	/* 页面容器：添加内边距，避免内容贴边 */
	.container {
		padding: 20rpx;
		background-color: #f5f5f7;
		min-height: 100vh;
	}

	/* 每个表单项的样式：添加间距 */
	.item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	/* 表单项标题样式 */
	.item .title {
		padding: 20rpx 0;
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
	}

	/* Radio/Checkbox 标签：横向排列，添加间距 */
	.radio-label,
	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 15rpx;
		margin-right: 40rpx;
		font-size: 24rpx;
		color: #666;
	}

	/* 缩小开关、单选框、复选框（保持原需求） */
	switch,
	radio,
	checkbox {
		transform: scale(0.7);
	}

	/* 输入框样式：添加边框和内边距，避免显示错乱 */
	.uni-input {
		width: 100%;
		height: 70rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
	}

	/* 按钮组：横向排列，添加间距 */
	.btn-group {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	/* 按钮样式：占满宽度，调整高度 */
	button {
		flex: 1;
		/* 两个按钮平分宽度 */
		height: 80rpx;
		font-size: 28rpx;
	}
</style>